<!--
 * @Author: liuxinyea
 * @Date: 2025-03-20 04:14:17
 * @LastEditors: liuxinyea
 * @LastEditTime: 2025-04-03 10:51:20
 * @Description: 描述
-->
<template>
  <div class="min-h-screen" :class="colorMode.value === 'dark' ? 'dark bg-gray-900' : 'bg-gray-50'">
    <!-- 固定导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 shadow-md" :class="colorMode.value === 'dark' ? 'bg-gray-800' : 'bg-white'">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <NuxtLink to="/" class="text-xl font-bold" :class="colorMode.value === 'dark' ? 'text-white' : 'text-gray-800'">新闻应用</NuxtLink>
          </div>
          <div class="flex items-center space-x-4">
            <NuxtLink to="/" :class="colorMode.value === 'dark' ? 'text-gray-300 hover:text-white' : 'text-gray-600 hover:text-gray-900'">首页</NuxtLink>
            <button @click="toggleColorMode" class="p-2 rounded-lg" :class="colorMode.value === 'dark' ? 'hover:bg-gray-700' : 'hover:bg-gray-100'">
              <span v-if="colorMode.value === 'dark'" class="text-yellow-400">🌞</span>
              <span v-else class="text-gray-600">🌙</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 - 添加顶部内边距以避免被固定导航栏遮挡 -->
    <main class="pt-12">
      <NuxtPage />
    </main>

    <!-- 页脚 -->
    <footer class="mt-8 py-6" :class="colorMode.value === 'dark' ? 'bg-gray-800' : 'bg-white'">
      <div class="container mx-auto px-4 text-center" :class="colorMode.value === 'dark' ? 'text-gray-400' : 'text-gray-600'">
        <p>© 2024 新闻应用. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
const colorMode = useColorMode()

const toggleColorMode = () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
</script>
